Ext.define('Atman.controller.Dashboard1', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            dashboard:{
                selector:'#dashboardview1',
                xtype:'dashboardview1',
                autoCreate:true
            },
            dashboardMain:{
                selector:'#dashboardmain1',
                xtype:'dashboardmain1',
                autoCreate:true
            },
            dashboardSub:{
                selector:'#dashboardsub1',
                xtype:'dashboardsub1',
                autoCreate:true
            },
            btnDashboardHome:'#dashboardhome1'
        },
        control:{
            dashboardMain:{
                initialize:'applyDashboardMain'
            },
            dashboardSub:{
                initialize:'applyDashboardSub'
            },
            btnDashboardHome:{
                tap:'dashboardHome'
            }
        }
    },
    dashboardHome:function(){
        Ext.getCmp('dashboardtitle1').setTitle('Dashboard [Main]');
        this.getBtnDashboardHome().setHidden(true);
        this.getDashboard().animateActiveItem(0,{type:'flip',direction:'right'});
    },
    /* Version : 1 */
    applyDashboardMain:function(){
        var panel = this.getDashboardMain();
        var color = ['red','green','blue'];
        var title = ['수익지표','비용지표','생산성지표'];
        var unitPanel = [];
        for(var j=0;j<3;j++){
            var tmpPanel = [];
            for(var i=0;i<5;i++){
                var subPanel = Ext.create('Ext.Panel', {
                    //flex: 1,
                    margin: 5,
                    height: 200,
                    layout: {type:'fit'},
                    style:'border-radius: 5px;background-color:yellow;',
                    items:[{
                        xtype:'titlebar',
                        docked:'top',
                        title:'타이틀',
                        style:'border-radius: 5px 5px 0px 0px;'
                    }],
                    html:'<table width="100%" height="100%" align="center">' +
                        '<tr><td width="50%">' +
                        '<table><tr><td valign="bottom">계획 : 3,408</td></tr><tr><td valign="top">실적 : 4,731</td></tr></table></td>' +
                        '<td width="50%"><table><tr height="10%"><td>달성률</td></tr>' +
                        '<tr height="80%"><td><img src="resources/icons/arrow_up.png" width="100" height="100"/></td></tr>' +
                        '<tr height="10%"><td>139%</td></tr></table>' +
                        '</td></tr></table>',
                    listeners:{
                        tap:{
                            fn:function(event){
                                Ext.getCmp('dashboardtitle1').setTitle('Dashboard [Detail]');
                                Ext.getCmp('dashboardhome1').setHidden(false);
                                Ext.getCmp('dashboardview1').animateActiveItem(1,{type:'flip',direction:'left'});
                            },
                            element:'element'
                        }
                    }
                });
                tmpPanel.push(subPanel);
            }
            unitPanel.push(tmpPanel);
        }
        for(var i=0;i<3;i++){
            var subPanel = Ext.create('Ext.Panel', {
                flex: 1,
                margin: 10,
                layout: {type:'vbox'},
                scrollable: {direction:'vertical'},
                style:'border-radius: 10px 10px 0px 0px;background-color:'+color[i],
                items:[{
                    xtype:'titlebar',
                    docked:'top',
                    title:title[i],
                    style:'border-radius: 10px 10px 0px 0px;'
                }]
            });
            subPanel.add(unitPanel[i]);
            panel.add(subPanel);
        }

    },
    applyDashboardSub:function(){
        var panel = this.getDashboardSub();
        var color = ['red','green','blue'];
        var title = ['수익지표','비용지표','생산성지표'];
        var unitPanel = [];

        var getChart = Ext.create('Ext.chart.Chart',{
            flex:3,
            animate: true,
            store: {
                fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                data: [
                    {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                    {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                    {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                    {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                    {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                ]
            },
            legend: {
                position: 'top'
            },
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                }
            }],
            series: [{
                type: 'area',
                title: ['Data1', 'Data2', 'Data3'],
                subStyle: {
                    fill: ['blue', 'green', 'red']
                },
                xField: 'name',
                yField: ['data1', 'data2', 'data3']

            }]
        });
        var subPanel = Ext.create('Ext.Panel',{
            flex:3,
            layout:'fit',
            items:getChart
        });
        panel.add(subPanel);

        for(var j=0;j<1;j++){
            var tmpPanel = [];
            for(var i=0;i<5;i++){
                var subPanel = Ext.create('Ext.Panel', {
                    //flex: 1,
                    margin: 5,
                    height:200,
                    layout: {type:'fit'},
                    style:'border-radius: 5px;background-color:yellow;',
                    items:[{
                        xtype:'titlebar',
                        docked:'top',
                        title:'타이틀',
                        style:'border-radius: 5px 5px 0px 0px;'
                    }],
                    html:'<table width="100%" height="100%" align="center">' +
                        '<tr><td width="50%">' +
                        '<table><tr><td valign="bottom">계획 : 3,408</td></tr><tr><td valign="top">실적 : 4,731</td></tr></table></td>' +
                        '<td width="50%"><table><tr height="10%"><td>달성률</td></tr>' +
                        '<tr height="80%"><td><img src="resources/icons/arrow_up.png" width="100" height="100"/></td></tr>' +
                        '<tr height="10%"><td>139%</td></tr></table>' +
                        '</td></tr></table>'
                });
                tmpPanel.push(subPanel);
            }
            unitPanel.push(tmpPanel);
        }
        for(var i=0;i<1;i++){
            var subPanel = Ext.create('Ext.Panel', {
                flex: 1,
                margin: 10,
                layout: {type:'vbox'},
                scrollable: {direction:'vertical'},
                style:'border-radius: 10px 10px 0px 0px;background-color:'+color[i],
                items:[{
                    xtype:'titlebar',
                    docked:'top',
                    title:title[i],
                    style:'border-radius: 10px 10px 0px 0px;'
                }]
            });
            subPanel.add(unitPanel[i]);
            panel.add(subPanel);
        }

    }
});